<template>
  <div class='pickerStyle'>
    <el-date-picker
      v-model="dateSta"
      type="date"
      :placeholder="placeholderSta"
      :picker-options="pickerOptions0"
      @change="DateChangeSta()"
    ></el-date-picker>
    <span> 至 </span>
    <el-date-picker
      v-model="dateEnd"
      type="date"
      :placeholder="placeholderEnd"
      :picker-options="pickerOptions1"
      @change="DateChangeEnd()"
    ></el-date-picker>
  </div>
</template>
<script>
import moment from "moment";
import { timestampToTime } from "../utils/dateFormat";
/**
* @file: 日期区间组件
* @author: lwj
* @date: 2021-03-1
* @description: ''
* @api: placeholderSta : 第一个选择框的提示词     默认值:开始日期
* @api: placeholderEnd : 第二个选择框的提示词     默认值:结束日期
* @api: isEqual : 开始日期和结束日期是否能同一天;  默认值:true(可以同一天)
*/
export default {
  model: {
    prop: "dateText", // 父組件v-model的值
    even: "input",    // $emit事件的名称
  },
  props: {
    placeholderSta: {
      // 提示词
      type: String,
      default: "开始日期",
    },
    placeholderEnd: {
      // 提示词
      type: String,
      default: "结束日期",
    },
    isEqual: {
      // 开始日期和结束日期是否能同一天,默认能
      type: Boolean,
      default: true,
    },
    dateText: {
      default: {},
      type: Object,
    }
  },
  watch: {
    dateText: function(val, old) {
      return val;
    }
  },
  data() {
    return {
      dateSta: "",
      dateEnd: "",
      obj: {
        sta: "",
        end: "",
      },
      pickerOptions0: {
        disabledDate: time => {
          if (this.dateEnd) {
            if (this.isEqual) {
              // 开始日期和结束日期可以同一天,true:可以
              return (
                time.getTime() > Date.now() || time.getTime() > this.dateEnd
              );
            } else {
              return (
                time.getTime() > Date.now() || time.getTime() >= this.dateEnd
              );
            }
          } else {
            return time.getTime() > Date.now();
          }
        }
      },
      pickerOptions1: {
        disabledDate: time => {
          if (this.isEqual) {
            // 开始日期和结束日期可以同一天,true:可以
            return time.getTime() < this.dateSta || time.getTime() > Date.now();
          } else {
            return (
              time.getTime() <= this.dateSta || time.getTime() > Date.now()
            );
          }
        }
      }
    };
  },
  methods: {
    DateChangeSta(val) {
      console.log('val',val);
      
      let date = "";
      if (this.dateSta) {
        date = timestampToTime(this.dateSta); // 时间戳转换为2021-03-02格式
      }
      this.obj.sta = date;
      this.$emit("input", this.obj); // 向watch里面的dateText传送值
    },
    DateChangeEnd() {
      let date = "";
      if (this.dateEnd) {
        date = timestampToTime(this.dateEnd); // 时间戳转换为2021-03-02格式
      }
      this.obj.end = date;
      this.$emit("input", this.obj); // 向watch里面的dateText传送值
    }
  }
};
</script>	
<style lang="less">
.pickerStyle {
  display: inline-block;
}
</style>
